<template>
	<div style="padding:0 37px 0 44px">
		<div class="breadcrumb-father">
			<div class="new-breadcrumb">
				<router-link  :to="{path:'/welcome'}">
					<img src="../../assets/imgs/Home.png" alt="">
				</router-link>
				<!-- <a href="javascript:void(0)">
				</a> -->
				<span>{{$t('index.personnel')}}</span>
				<span class="arrow">></span>
				<!-- <a href="javascript:void(0)">
				</a> -->
				<span>{{$t('index.Salesman')}}</span>
			</div>
		</div>

		<div class="card-table">
			<div class="card-table-title">
				<svg aria-hidden="true" class="svg-icon svg-title-icon">
					<use xlink:href="#icon-yewuyuanguanli"></use>
				</svg>
				<span>{{$t('index.Salesman')}}</span>
				<span style="float:right;">
					<a href="javascript:void(0)" v-if=" userPhone === '13501189583' || userPhone === '15018955912' || userPhone === '15219441946' ? false : true "  @click="addSalesman" :title="$t('button.NewSalesman')"><icon-svg icon-class="tianjiaxinchengyuan"></icon-svg></a>
				</span>
			</div>
			<div class="table-border">
				<!--业务员信息-->
				<el-table border :data="salesmanData" height=500 @cell-mouse-enter="showHandle" @cell-mouse-leave="hiddenHandle" v-loading="loading" :element-loading-text="$t('button.loading')" element-loading-background="rgba(255, 255, 255, 1)">
					<el-table-column type="index" fixed :label="$t('index.Number')" width="70">
					</el-table-column>
					<el-table-column prop="salesmanNumber" :label="$t('agent.BDStaffNo')">
					</el-table-column>
					<el-table-column prop="salesmanName" :label="$t('salesman.Name')">
					</el-table-column>
					<el-table-column v-if="this.companyId === '2' ? false : true" prop="legalPersonIdNumber" :label="$t('salesman.ID')">
					</el-table-column>
					<el-table-column prop="phone" :label="$t('mec.Phone')">
					</el-table-column>
					<el-table-column prop="email" :label="$t('mec.Email')">
					</el-table-column>
					<el-table-column prop="addDate" :label="$t('mec.CreationTime')" width="200">
					</el-table-column>
					<el-table-column prop="state" :label="$t('salesman.Status')" :formatter="judgeState">
					</el-table-column>
					<el-table-column fixed="right" class-name="animate_td handle-hidden-3">
					<template slot-scope="scope">
						<a class="svg-link-class" :title="$t('button.Modify')" v-if=" userPhone === '13501189583' || userPhone === '15018955912' || userPhone === '15219441946' ? false : true "  @click='modifySalesmanData(scope.row)'>
							<svg aria-hidden="true" class="svg-icon svg-action-icon"><use xlink:href="#icon-bianji"></use></svg>
						</a>
						<a class="svg-link-class" :title="$t('button.Enabled1')"  v-if="scope.row.enabled === false && userPhone !== '13501189583' && userPhone !== '15018955912' && userPhone !== '15219441946' " @click='stopOrStart(scope.row.enabled,scope.row.id,scope.row.salesmanNumber)'>
							<svg aria-hidden="true" class="svg-icon svg-action-icon"><use xlink:href="#icon-qiyong"></use></svg>
						</a>
						<a class="svg-link-class" :title="$t('button.Suspended2')" v-if=" scope.row.enabled === true && userPhone !== '13501189583' && userPhone !== '15018955912' && userPhone !== '15219441946' " @click='stopOrStart(scope.row.enabled,scope.row.id,scope.row.salesmanNumber)'>
							<svg aria-hidden="true" class="svg-icon svg-action-icon"><use xlink:href="#icon-stop"></use></svg>
						</a>						
					</template>
				</el-table-column>
				</el-table>
				<!--澳洲新增业务员-->
				<el-dialog class="BD-style" id="AuAddDialog" :title="$t('salesman.NewBDStaff')" :close-on-click-modal=false :visible.sync="dialogFormVisible" v-if="this.companyId === '2' ? true : false" @close="closeAuAddModel('addForm')">
					<el-form :model="addForm" :rules="AuRules" :inline="true" label-position="top" ref="addForm">
						<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
							<el-input class="BD-item" v-model.lazy="addForm.salesmanName" auto-complete="off" :placeholder="$t('placeH.Required')" :maxlength=50 id='salesmanName' @focus="focusLabel('salesmanName',1)" @blur="blurLabel('salesmanName')"></el-input>
							<div class="el-input-img" v-show="rightImg1"><img :src="rightImg1" alt=""></div>
						</el-form-item>
						<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
							<el-input class="BD-item" v-model.lazy="addForm.salesmanNumber" auto-complete="off" :placeholder="$t('placeH.Required')" :maxlength=10 id='salesmanNumber' @focus="focusLabel('salesmanNumber',2)" @blur="blurLabel('salesmanNumber')"></el-input>
							<div class="el-input-img" v-show="rightImg2"><img :src="rightImg2" alt=""></div>
						</el-form-item>
						<el-form-item :label="$t('mer.PhoneNo')" label-width="100px" prop="phone">
							<el-input class="BD-item" v-model.lazy="addForm.phone" auto-complete="off" :maxlength=20 id='newAuPhone' @focus="focusLabel('newAuPhone')" @blur="blurLabel('newAuPhone')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
							<el-input class="BD-item" v-model.lazy="addForm.email" auto-complete="off" :placeholder="$t('placeH.Required')" :maxlength=100 id='email' @focus="focusLabel('email',5)" @blur="blurLabel('email',2)"></el-input>
							<div class="el-input-img" v-show="rightImg5"><img :src="rightImg5" alt=""></div>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="submitForm('Au')">{{$t('button.OK')}}</el-button>
					</div>
				</el-dialog>
				<!--香港新增业务员-->
				<el-dialog class="BD-style" id="HKAddDialog" :title="$t('salesman.NewBDStaff')"  :close-on-click-modal=false :visible.sync="dialogFormVisible" v-if="this.companyId === '2' ? false : true" @close="closeHKAddModel('addForm')">
					<el-form :model="addForm" :rules="HKRules" :inline="true" label-position="top" ref="addForm">
						<el-form-item :label="$t('salesman.Name')" prop="salesmanName">
							<el-input class="BD-item" v-model.lazy="addForm.salesmanName" :placeholder="$t('placeH.Required')" auto-complete="off" :maxlength=50 id="salesmanName" @focus="focusLabel('salesmanName',1)" @blur="blurLabel('salesmanName')"></el-input>
							<div class="el-input-img" v-show="rightImg1"><img :src="rightImg1" alt=""></div>
						</el-form-item>
						<el-form-item :label="$t('agent.BDStaffNo')" prop="salesmanNumber">
							<el-input class="BD-item" v-model.lazy="addForm.salesmanNumber" :placeholder="$t('placeH.Required')" auto-complete="off" :maxlength=10 id='salesmanNumber' @focus="focusLabel('salesmanNumber',2)" @blur="blurLabel('salesmanNumber')"></el-input>
							<div class="el-input-img" v-show="rightImg2"><img :src="rightImg2" alt=""></div>
						</el-form-item>
						<el-form-item :label="$t('salesman.ID')" prop="legalPersonIdNumber">
							<el-input class="BD-item" v-model.lazy="addForm.legalPersonIdNumber" :placeholder="$t('placeH.Required')" auto-complete="off" :maxlength=20 id='legalPersonIdNumber' @focus="focusLabel('legalPersonIdNumber',3)" @blur="blurLabel('legalPersonIdNumber')"></el-input>
							<div class="el-input-img" v-show="rightImg3"><img :src="rightImg3" alt=""></div>
						</el-form-item>
						<el-form-item :label="$t('mer.PhoneNo')" prop="phone">
							<el-input type="text" class="BD-item" v-model.lazy="addForm.phone" :placeholder="$t('placeH.Required')" auto-complete="off" :maxlength=20 id='newHkPhone' @focus="focusLabel('newHkPhone',4)" @blur="blurLabel('newHkPhone')"></el-input>
							<div class="el-input-img" v-show="rightImg4"><img :src="rightImg4" alt=""></div>
						</el-form-item>
						<el-form-item :label="$t('mec.Email')" prop="email">
							<el-input class="BD-item" v-model.lazy="addForm.email" auto-complete="off" :maxlength=100 id='email' @focus="focusLabel('email')" @blur="blurLabel('email',2)"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button class="footer-ok" @click="submitForm('HK')">{{$t('button.OK')}}</el-button>
					</div>
				</el-dialog>
				
				<!--澳洲修改业务员-->
				<el-dialog class="BD-style" id="AuModifyDialog" :title="$t('salesman.ModifyTheSalesmanInformation')" :close-on-click-modal=false :visible.sync="dialogModifyFormVisible" v-if="this.companyId === '2' ? true : false" @close="closeAuModifyModel('modifyForm')">
					<el-form :model="modifyForm" :rules="AuModifyRules" :inline="true" label-position="top" ref="modifyForm">
						<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
							<el-input class="BD-item" v-model.lazy="modifyForm.salesmanName" auto-complete="off" :disabled=true :maxlength=50 ></el-input>
						</el-form-item>
						<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
							<el-input class="BD-item" v-model.lazy="modifyForm.salesmanNumber" auto-complete="off" :disabled=true :maxlength=10 ></el-input>
						</el-form-item>					 
						<el-form-item :label="$t('mer.PhoneNo')" label-width="100px" prop="phone">
							<el-input type="text" class="BD-item" v-model.lazy="modifyForm.phone" placeholder="" auto-complete="off" :maxlength=20 id='modifyAuPhone' @focus="focusLabel('modifyAuPhone')" @blur="blurLabel('modifyAuPhone')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
							<el-input class="BD-item" v-model.lazy="modifyForm.email" auto-complete="off" :placeholder="$t('placeH.Required')" :maxlength=100 id='email' @focus="focusLabel('email',6)" @blur="blurLabel('email',1)"></el-input>
							<div class="el-input-img" v-show="rightImg6"><img :src="rightImg6" alt=""></div>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button class="footer-ok" @click="modifyFormData('Au')">{{$t('button.Modify')}}</el-button>
					</div>
				</el-dialog>
				<!--香港修改业务员-->
				<el-dialog class="BD-style" id="HKModifyDialog" :title="$t('salesman.ModifyTheSalesmanInformation')" :close-on-click-modal=false :visible.sync="dialogModifyFormVisible" v-if="this.companyId === '2' ? false : true" @close="closeHKModifyModel('modifyForm')">
					<el-form :model="modifyForm" :rules="HKModifyRules" :inline="true" label-position="top" ref="modifyForm">
						<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
							<el-input class="BD-item" v-model.lazy="modifyForm.salesmanName" auto-complete="off" :disabled=true :maxlength=50 ></el-input>
						</el-form-item>
						<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
							<el-input class="BD-item" v-model.lazy="modifyForm.salesmanNumber" auto-complete="off" :disabled=true :maxlength=10 ></el-input>
						</el-form-item>
						<el-form-item :label="$t('salesman.ID')" label-width="100px" prop="legalPersonIdNumber">
							<el-input class="BD-item" v-model.lazy="modifyForm.legalPersonIdNumber" auto-complete="off" :placeholder="$t('placeH.Required')" :maxlength=20  id='legalPersonIdNumber' @focus="focusLabel('legalPersonIdNumber')" @blur="blurLabel('legalPersonIdNumber')"></el-input>
							<div class="el-input-img" v-show="rightImg7"><img :src="rightImg7" alt=""></div>
						</el-form-item>
						<el-form-item :label="$t('mer.PhoneNo')" label-width="100px" prop="phone">
							<el-input type="text" class="BD-item" v-model.lazy="modifyForm.phone" :placeholder="$t('placeH.Required')" auto-complete="off" :maxlength=20 id='modifyHkPhone' @focus="focusLabel('modifyHkPhone',4)" @blur="blurLabel('modifyHkPhone')"></el-input>
							<div class="el-input-img" v-show="rightImg8"><img :src="rightImg8" alt=""></div>
						</el-form-item>
						<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
							<el-input class="BD-item" v-model.lazy="modifyForm.email" auto-complete="off" :maxlength=100 id='email' @focus="focusLabel('email',8)" @blur="blurLabel('email',1)"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button class="footer-ok" @click="modifyFormData('HK')">{{$t('button.Modify')}}</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
		<div class="pagination-container">
			<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page.sync="searchSalesmanData.page" :page-sizes="[15,20,30,50]" :page-size="searchSalesmanData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
		</div>
	</div>
</template>

<script>
	import { salesmanList,salesmanAdd,validateSalesmanNum,modifySalesman,validateEmailAdd,validateEmailModify,validatePhoneAdd,validatePhoneModify } from 'api/salesman/index';
	import right from '@/assets/imgs/right.png'
	import err from '@/assets/imgs/err.png'
	export default {
		name: 'salesmanManage',
		data() {
			const checkBDName = (rule, value, callback) => {
				if (!value) {
					this.rightImg1 = err;
				return callback(new Error( this.$t('hint.PleaseEnterName') ));
				} else {
					this.rightImg1 = right;
					callback();
				}
			};
			const checkBDNumber = (rule, value, callback) => {
				if (!value) {
					this.rightImg2 = err;
				return callback(new Error( this.$t('hint.PleaseEnterBDStaffNumber') ));
				} else {
					validateSalesmanNum(value,this.companyId).then(res=>{
						if( res.code ===0 ){
							this.rightImg2 = right;
							callback();
						}else{
							this.rightImg2 = err;
							return callback(new Error( this.$t('hint.BDStaffNumberExistsPleaseReEnter') ));
						}
					})
				}
			};
			const checkBDID = (rule, value, callback) => {
				if (!value) {
					this.rightImg3 = err;
					return callback(new Error( this.$t('hint.PleaseEnterIDNumber') ));
				} else {
					this.rightImg3 = right;
					callback();
				}
			};
			const checkPhone = (rule, value, callback) => {
				const reg = new RegExp("/[^\d\-]/g");
				if (!value) {
					this.rightImg4 = err;
					return callback(new Error( this.$t('hint.PleaseEnterPhoneNumber') ));
				} 
				// else if( !reg.test(value) ){
				// 	this.addForm.phone = '';
				// 	return callback(new Error( '请输入数字' ));
				// } 
				else {
					validatePhoneAdd(value).then(res=>{
						if( res.code === 0 ){
							this.rightImg4 = right;
							callback();
						}else{
							this.rightImg4 = err;
							return callback(new Error( this.$t('other.PhoneNumberAlreadyExist') ));
						}
					})
				}
			};
			const checkEmail = (rule, value, callback) => {
				if (!value) {
					this.rightImg5 = err;
					return callback(new Error( this.$t('hint.PleaseEnterEmail') ));
				} else {
					// const reg = new RegExp("");
					const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
					// 1 修改  2新增
					// const obj = index === 1 ? this.modifyForm : this.addForm;
					if(!reg.test(value)){
						this.rightImg5 = err;
						return callback(new Error( this.$t('hint.EmailFormatIncorrect') ));
						// this.$message( this.$t('hint.EmailFormatIncorrect') );
					} else {
						validateEmailAdd(value).then(res=>{
							if(res.code === 0){
								this.rightImg5 = right;
								callback();
							}else{
								this.rightImg5 = err;
								return callback(new Error( this.$t('other.EmailAlreadyExists') ));
							}
						})
					}
				} 
			};
			const checkEmail2 = (rule, value, callback) => {
				if (!value) {
					this.rightImg6 = err;
					return callback(new Error( this.$t('hint.PleaseEnterEmail') ));
				} else {
					const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
					if(!reg.test(value)){
						this.rightImg6 = err;
						return callback(new Error( this.$t('hint.EmailFormatIncorrect') ));
						// this.$message( this.$t('hint.EmailFormatIncorrect') );
					} else {
						validateEmailModify(value,this.modifyForm.id).then(res=>{
							if(res.code === 0){
								this.rightImg6 = right;
								callback();
							}else{
								this.rightImg6 = err;
								return callback(new Error( this.$t('other.EmailAlreadyExists') ));
							}
						})
					}
				}
			};
			const checkBDID2 = (rule, value, callback) => {
				if (!value) {
					this.rightImg7 = err;
				return callback(new Error( this.$t('hint.PleaseEnterIDNumber') ));
				} else {
					this.rightImg7 = right;
					callback();
				}
			};
			const checkPhone2 = (rule, value, callback) => {
				if (!value) {
					this.rightImg8 = err;
				return callback(new Error( this.$t('hint.PleaseEnterPhoneNumber') ));
				} else {
					validatePhoneModify(value,this.modifyForm.id).then(res=>{
						if( res.code ===0 ){
							this.rightImg8 = right;
							callback();
						}else{
							this.rightImg8 = err;
							return callback(new Error( this.$t('other.PhoneNumberAlreadyExist') ));
						}
					})
				}
			};
			return {
				rightImg1:'',
				rightImg2:'',
				rightImg3:'',
				rightImg4:'',
				rightImg5:'',
				rightImg6:'',
				rightImg7:'',
				rightImg8:'',
				userPhone:localStorage.getItem('phone'),
				dialogModifyFormVisible:false,
				dialogFormVisible:false,
				res: [], //分页 数据总条数
				salesmanData:[],
				nullObj:{},
				// distributorId:localStorage.getItem('distributorId'),
				companyId:localStorage.getItem('companyId'),
				searchSalesmanData: { //查询参数
					page: 1,
					pageSize: 15,
					companyId:localStorage.getItem('companyId'),
				},
				addForm:{
					salesmanName:undefined,
					salesmanNumber:undefined,
					legalPersonIdNumber:undefined,
					phone:undefined,
					email:undefined,
				},
				modifyForm:{
					salesmanName:undefined,
					salesmanNumber:undefined,
					legalPersonIdNumber:undefined,
					phone:undefined,
					email:undefined,
				},
				HKRules: {
			        salesmanName: [
			            { validator: checkBDName, trigger: 'blur' }
			        ],
			        salesmanNumber: [
			            { validator: checkBDNumber, trigger: 'blur' }
			        ],
			        legalPersonIdNumber: [
			            { validator: checkBDID, trigger: 'blur' } 
			        ],
			        phone: [
			           { validator: checkPhone, trigger: 'blur' }
			        ],
			  	},
				HKModifyRules:{
					legalPersonIdNumber: [
						{ validator: checkBDID2, trigger: 'blur' } 
					],
					phone: [
						{ validator: checkPhone2, trigger: 'blur' }
					],
				},
			  	AuRules: {
			        salesmanName: [
			            { validator: checkBDName, trigger: 'blur' }
			        ],
			        salesmanNumber: [
			            { validator: checkBDNumber, trigger: 'blur' }
			        ],
			        email: [ 
			           	{ validator: checkEmail, trigger: 'blur' }
			        ],
				  },
				AuModifyRules:{
					email: [ 
						{ validator: checkEmail2, trigger: 'blur' }
					],
				},
				rorateFlag:true,
      			last_td_arr:[],
      			oldPage: null,
      			loading: true,
			}
		},
		watch:{
		  'searchSalesmanData.page':function(newVal,oldVal){
		      this.oldPage = oldVal;
		  },
		},
		created(){
			
		},
		mounted() {
			this.getSalesmanList(this.searchSalesmanData);
		},
		methods: {
			showHandle(row, column, cell, event){
				// console.log(row);
				for(let i = 0;i<this.salesmanData.length;i++){
					if(this.salesmanData[i].id === row.id){
						this.tableIndex = i;
						const table_row = $(".el-table__fixed-right").find('.el-table__row')[i];
						$(table_row).find('td:last').removeClass('handle-hidden-'+ this.last_td_arr[i] );
						$(".el-table__fixed-right").addClass("fixed-column-" + this.last_td_arr[i] );
						$(".el-table__fixed-right").css("z-index","22");
						var action_div = $(table_row).find('td:last').children("div");
						$(action_div).stop().animate({"right": "0"});
					}
				}
				// 判断项目数目是否导致滚动条出现
				if(this.salesmanData.length <= 15){
					$(".el-table__fixed-right").addClass("right-zero");
				}else{
					$(".el-table__fixed-right").removeClass("right-zero");
				}
			},
			hiddenHandle(row, column, cell, event){
				const table_row = $(".el-table__fixed-right").find('.el-table__row')[this.tableIndex];
				$(".el-table__fixed-right").css("z-index","0");
				var action_div = $(table_row).find('td:last').children("div");
				$(action_div).stop().animate({"right": "-360px"});
			},
			// input获得焦点事件
			focusLabel(id,index){
				$('#'+ id).parent().parent()[0].children[0].style.fontWeight = 'bold';
			},
			// input失去焦点事件
			blurLabel(id,index){
				$('#'+ id).parent().parent()[0].children[0].style.fontWeight = 'normal';
				const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
				// 1 修改  2新增
				const obj = index === 1 ? this.modifyForm : this.addForm;
				if( !obj.email ){
					return false;
				} else if(!reg.test(obj.email)){
					this.$message( this.$t('hint.EmailFormatIncorrect') );
					// obj.email = undefined;
				}
			},
			//关闭对话框之前的回调
			closeAuAddModel(formRule){
				this.rightImg1 ='';
				this.rightImg2 ='';
				this.rightImg5 ='';
				this.$refs[formRule].resetFields();
			},
			closeHKAddModel(formRule){
				this.rightImg1 ='';
				this.rightImg2 ='';
				this.rightImg3 ='';
				this.rightImg4 ='';
				this.$refs[formRule].resetFields();
			},
			closeAuModifyModel(formRule){
				this.rightImg6 ='';
				this.$refs[formRule].resetFields();
			},
			closeHKModifyModel(formRule){
				this.rightImg7 ='';
				this.rightImg8 ='';
				this.$refs[formRule].resetFields();
			},
			//格式化业务员当前状态
			judgeState(row){
				let state = row.state;
				return state = state === '1' ? this.$t('button.Suspended3') : this.$t('button.Enabled');
			},
			//查询业务员列表
			getSalesmanList(data,str){
				
				const _that = this;

				_that.loading = true;

				if( str == 'CurrentChange' ){
				  // 获取所有分页项数，循环去除选中样式，对点击前的项数添加选中样式
				  let obj = $('.el-pager .number');
				  for( let i = 0; i < obj.length; i++){
				      if($(obj[i]).html() == this.oldPage) {
				        $(obj[i]).addClass('active');
				      } else {
				        $(obj[i]).removeClass('active');
				      }
				  }
				}

				this.last_td_arr = [];
				salesmanList(data).then(res=>{
					this.salesmanData = res.value.list;
					this.res = res.value;

					// 如果是分页触发，循环去除选中样式，对点击后的项数添加选中样式
					if( str == 'CurrentChange' ){
					  let obj = $('.el-pager .number');
					  for( let i = 0; i < obj.length; i++){
					      if($(obj[i]).html() == this.searchSalesmanData.page) {
					        $(obj[i]).addClass('active');
					      } else {
					        $(obj[i]).removeClass('active');
					      }
					  }
					}

					setTimeout(function (param) { 
						const td_last_child = $(".el-table__body-wrapper tr td:last-child");
						for(let i=0;i<td_last_child.length;i++){
							$(td_last_child[i]).removeClass('handle-hidden-3');
						}
						const td_fixed_last_child = $(".el-table__fixed-right tr td:last-child");
						for(let i=0;i<td_fixed_last_child.length;i++){
							// console.log($(td_fixed_last_child[i]).find('.svg-link-class').length);
							if( $(td_fixed_last_child[i]).find('.svg-link-class').length === 1 ){
								$(td_fixed_last_child[i]).removeClass('handle-hidden-3').addClass('handle-hidden-1');
							} else if( $(td_fixed_last_child[i]).find('.svg-link-class').length === 2 ){
								$(td_fixed_last_child[i]).removeClass('handle-hidden-3').addClass('handle-hidden-2');
							} 
							_that.last_td_arr.push($(td_fixed_last_child[i]).find('.svg-link-class').length);
						}

						_that.loading = false;
						
					},500)
				})
			},
			//停用启用业务员
			stopOrStart(enabled,id,salesmanNumber){
				const salesmanInfo = enabled === false ? this.$t('button.Enabled2') : this.$t('button.Suspended1');
				this.nullObj.enabled = !enabled;
				this.nullObj.id = id;
				this.nullObj.companyId = this.companyId;
				this.nullObj.salesmanNumber = salesmanNumber;
				this.$msgbox({
					title:this.$t("hint.Alert"),
					message:this.$t('hint.SureTo')+salesmanInfo+this.$t('salesman.theSalesman'),
					showCancelButton: true,
			        confirmButtonText: this.$t('button.OK'),
			        cancelButtonText: this.$t('button.Cancel'),
				}).then(() => {
		          	modifySalesman(this.nullObj).then(res=>{
		          		if(res.code === 0 ){
		          			this.dialogModifyFormVisible = false;
		          			this.$notify({
					            title: this.$t('hint.Success'),
					            message: salesmanInfo + this.$t('hint.Success1'),
					            type: 'success',
					            duration: 2000
				         	});
							this.getSalesmanList(this.searchSalesmanData);
		          		}else{
		          			this.$notify({
					            title: this.$t('hint.Fail'),
					            message: salesmanInfo + this.$t('hint.Fail1'),
					            type: 'error',
					            duration: 2000
				         	});
		          		}
		          	})
			    });
			},
			//新增业务员信息
			submitForm(region){
				this.addForm.companyId = this.companyId;
				this.addForm.companyId = this.companyId;
				if(region === 'Au'){
					this.addForm.legalPersonIdNumber = null;
					if( this.addForm.salesmanName==='' || this.addForm.salesmanName===undefined  || this.addForm.salesmanNumber==='' || this.addForm.salesmanNumber===undefined || this.addForm.email==='' || this.addForm.email===undefined ){
						this.$message(this.$t('hint.MandatoryFieldsAreNotFilledIn'));
						return false;
					}else{
						this.$refs['addForm'].validate((valid) => {
							const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
							if(!valid){
								return false;
							}else{
								if(this.addForm.email){
									if( !reg.test(this.addForm.email) ){
										this.$message( this.$t('hint.EmailFormatIncorrect') );
										return false;
									}
								}
								this.AddSalesman();
							}
						})
					}
				}
				if(region === 'HK'){
					// console.log(this.addForm);
					if( this.addForm.salesmanName==='' || this.addForm.salesmanName===undefined  || this.addForm.salesmanNumber==='' || this.addForm.salesmanNumber===undefined || this.addForm.legalPersonIdNumber==='' || this.addForm.legalPersonIdNumber===undefined || this.addForm.phone==='' || this.addForm.phone===undefined ){
						this.$message(this.$t('hint.MandatoryFieldsAreNotFilledIn'));
						return false;
					}else{
						this.$refs['addForm'].validate((valid) => {
							const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
							if(!valid){
								return false;
							}else{
								if( !reg.test(this.addForm.email) && this.addForm.email){
									this.$message( this.$t('hint.EmailFormatIncorrect') );
									return false;
								}
								this.AddSalesman();
							}
						})
					}
				}
				
			},
			AddSalesman(){
				salesmanAdd(this.addForm).then(res=>{
	            	if(res.code === 0){
	            		this.$notify({
				            title: this.$t('hint.Success'),
				            message: this.$t('hint.BDRecordCreated'),
				            type: 'success',
				            duration: 2000
			         	});
			         	this.dialogFormVisible = false;
						this.getSalesmanList(this.searchSalesmanData);
	            	}else{
	            		this.$notify({
				            title:  this.$t('hint.Fail'),
				            message: this.$t('hint.BDCreateFailed'),
				            type: 'error',
				            duration: 2000
			         	});
			         	this.dialogFormVisible = false;
	            	}
	            })
			},
			modifySalesmanData(data) {
				$.extend(this.modifyForm, data);
				//				this.modifyForm = data;
				this.dialogModifyFormVisible = true;
				// console.log($('#modifyHkPhone'));
				if(this.companyId === '1'){
					setTimeout(function(){
						$('#modifyHkPhone').bind('keyup', function () { 
							this.value = this.value.replace(/[^\d\-]/g,'');
						}) 
					},1000);
				} else {
					setTimeout(function(){
						$('#modifyAuPhone').bind('keyup', function () { 
							this.value = this.value.replace(/[^\d\-]/g,'');
						})
					},1000);
				}
			},
			//新增业务员按钮
			addSalesman(){
				this.dialogFormVisible = true;
				this.addForm.salesmanName = undefined;
				this.addForm.salesmanNumber = undefined;
				this.addForm.legalPersonIdNumber = undefined;
				this.addForm.phone = undefined;
				this.addForm.email = undefined;
				if(this.companyId === '1'){
					setTimeout(function(){
						$('#newHkPhone').bind('keyup', function () { 
							this.value = this.value.replace(/[^\d\-]/g,'');
						}) 
					},1000);
				} else {
					setTimeout(function(){
						$('#newAuPhone').bind('keyup', function () { 
							this.value = this.value.replace(/[^\d\-]/g,'');
						}) 
					},1000);
				}
			},
			//修改业务员信息
			modifyFormData(region){
				if(region === 'Au'){
					this.modifyForm.legalPersonIdNumber = null;
				}
				if(region === 'HK'){
					this.modifyForm.email = this.modifyForm.email === '' ?  null : this.modifyForm.email;
				}
				const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
				if( this.modifyForm.email ){
					if( !reg.test(this.modifyForm.email) ){
						this.$message( this.$t('hint.EmailFormatIncorrect') );
						return false;
					}
				}
				this.modifyForm.companyId = this.companyId;
				this.$refs['modifyForm'].validate((valid) => {
					if(!valid){
						return false;
					}else{
						modifySalesman(this.modifyForm).then(res=>{
							if(res.code === 0 ){
								this.dialogModifyFormVisible = false;
								this.$notify({
									title: this.$t('hint.Success'),
									message: this.$t('hint.SuccessfullyModified'),
									type: 'success',
									duration: 2000
								});
								this.getSalesmanList(this.searchSalesmanData);
							}else{
								this.$notify({
									title: this.$t('hint.Fail'),
									message: this.$t('hint.FailToEdit'),
									type: 'error',
									duration: 2000
								});
							}
						})
					}
			    });
			},
			//pageSize 改变时会触发
			handleSizeChange(val) {
				this.searchSalesmanData.pageSize = val;
				this.getSalesmanList(this.searchSalesmanData);
			},
			//currentPage 改变时会触发
			handleCurrentChange(val) {
				this.searchSalesmanData.page = val;
				this.getSalesmanList(this.searchSalesmanData,'CurrentChange');
			}
		}
	}
</script>

<style>

</style>